<template>
	<view>
		<view class="shadow u-padding-20 " style="width: 700rpx;margin: auto;"> 
			<view class="u-flex u-row-between">
				<view class="u-font-lg u-font-weight ">{{info.storeName}}</view>
				<view>
					<u-rate disabled v-model="info.score" active-color="#FF5D39" size="24"></u-rate><text class="u-font-xs"
						style="color: #FF5D39;">{{info.score}}分</text>
				</view>
			</view>
			<view class="$u-type-info u-margin-top-20 u-font-xs">
				{{info.description}}
			</view>
			<view class="u-flex u-flex-wrap">
				<u-tag v-for="(item1,index1) in info.tabs" key="index1" class="u-margin-right-10 u-margin-top-10"
					:text="item1" mode="plain" size="mini" shape="circle" color="#818DFF" border-color="#818DFF"
					v-if="item1"></u-tag>
			</view>
		</view>
		
		
		<view class="nav">
			<view class="u-font-weight u-font-lg">门店评价</view>
		</view>
		
		<view class="shadow u-padding-20 " style="width: 700rpx;margin:20rpx auto;"> 
		    <view>点亮评分</view>
			<u-rate v-model="score" active-color="#FF5D39" size="24"></u-rate>
			
			<view class="gap">
				<u-gap bg-color="#f1f1f1" height="10" ></u-gap>
			</view>
			
			<view>填写评论</view>
			
			<u-input type="textarea"  placeholder="请输入评价" v-model="remark"/>
			<view class="gap">
				<u-gap bg-color="#f1f1f1" height="10" ></u-gap>
			</view>
			
			<view class="u-margin-bottom-20">上传图片</view>
				<upload_img ref="images" defaultLength="3"  type="image" @uploaded="uploaded" :afterLoadUrl="image_url"
					background="#818DFF" borderRadius="20" iconColor="#fff" width="160" height="160"></upload_img>
			
			
<u-toast ref="uToast" />

			
		</view>
		<u-button @click="submit" type="primary" :custom-style="{width:'500rpx'}" shape="circle">提交评价</u-button>
	</view>
</template>

<script>
	import upload_img from '@/components/upload_img.vue';
	export default{
		components: {
			upload_img
		},
		data(){
			return{
				info:{},
				score:5,
				remark:"",
				image_url:'',
			}
		},
		methods:{
			jiazai() {
				this.$u.post('/index/storeDetail', {
					store_id: this.id
				}).then(res => {
					this.info = res;
				}).catch(err => {
			
				})
			},
			submit(){
				if (!this.score) {
					this.$u.toast("请填写评分")
					return
				}
				if (!this.remark) {
					this.$u.toast("请输入评价")
					return
				}
				
				this.$u.post('/user/evaluate', {
					store_id: this.id,
					score:this.score,
					content:this.remark,
					image:this.$refs.images.afterUploadImgList.length?this.$refs.images.afterUploadImgList.join(","):''
				}).then(res => {
				this.$refs.uToast.show({
									title: '评价成功',
									type: 'success',
								back:true
								})
				}).catch(err => {
							
				})
				
			}
		},
		onLoad(options) {
		     
			if (options.id) {
				this.id = options.id
			}
			this.jiazai()
			
		},
		
	}
</script>

<style>
	.nav{
		display: flex;
		justify-content: center;
		text-align: center;
		position: relative;
		align-items: center;
		margin-top: 40rpx;
	}
	.gap{
		padding: 20rpx 0;
	}
</style>
